<template>
  <div class="institutions-container">
    <el-card class="page-card">
      <template #header>
        <div class="card-header">
          <span>医疗机构管理</span>
          <el-button type="primary" @click="showAddInstitutionDialog">添加医疗机构</el-button>
        </div>
      </template>
      
      <!-- 搜索和筛选 -->
      <div class="search-filter-section">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="机构名称">
            <el-input 
              v-model="searchForm.机构名称" 
              placeholder="请输入机构名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="机构类型">
            <el-select 
              v-model="searchForm.机构类型" 
              placeholder="请选择机构类型"
              clearable
            >
              <el-option label="三级医院" value="三级医院"></el-option>
              <el-option label="二级医院" value="二级医院"></el-option>
              <el-option label="一级医院" value="一级医院"></el-option>
              <el-option label="社区卫生服务中心" value="社区卫生服务中心"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所在地区">
            <el-cascader
              v-model="searchForm.所在地区"
              :options="regionOptions"
              placeholder="选择省市区"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 数据表格 -->
      <el-table 
        v-loading="loading" 
        :data="paginatedInstitutions" 
        style="width: 100%"
        border
      >
        <el-table-column prop="机构ID" label="机构ID" width="100" />
        <el-table-column prop="机构名称" label="机构名称" min-width="180">
          <template #default="{ row }">
            <span class="institution-name" @click="viewInstitutionDetail(row.机构ID)">{{ row.机构名称 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="机构类型" label="机构类型" width="120" />
        <el-table-column prop="所在地区" label="所在地区" width="180" :formatter="formatRegion" />
        <el-table-column prop="联系电话" label="联系电话" width="140" />
        <el-table-column prop="负责人" label="负责人" width="100" />
        <el-table-column prop="合作状态" label="合作状态" width="100">
          <template #default="{ row }">
            <el-tag 
              :type="row.合作状态 === '合作中' ? 'success' : row.合作状态 === '待审核' ? 'warning' : 'danger'" 
              effect="plain"
            >
              {{ row.合作状态 }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="加入时间" label="加入时间" width="180" />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="editInstitution(row)">编辑</el-button>
            <el-button type="danger" size="small" @click="deleteInstitution(row.机构ID)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filteredInstitutions.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    
    <!-- 添加/编辑医疗机构对话框 -->
    <el-dialog
      v-model="institutionDialogVisible"
      :title="dialogType === 'add' ? '添加医疗机构' : '编辑医疗机构'"
      width="700px"
    >
      <el-form 
        :model="institutionForm" 
        ref="institutionFormRef" 
        label-width="120px"
        :rules="formRules"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="机构名称" prop="机构名称">
              <el-input 
                v-model="institutionForm.机构名称" 
                placeholder="请输入机构名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构类型" prop="机构类型">
              <el-select v-model="institutionForm.机构类型" placeholder="请选择机构类型">
                <el-option label="三级医院" value="三级医院"></el-option>
                <el-option label="二级医院" value="二级医院"></el-option>
                <el-option label="一级医院" value="一级医院"></el-option>
                <el-option label="社区卫生服务中心" value="社区卫生服务中心"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所在地区" prop="所在地区">
              <el-cascader
                v-model="institutionForm.所在地区"
                :options="regionOptions"
                placeholder="选择省市区"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="详细地址" prop="详细地址">
              <el-input 
                v-model="institutionForm.详细地址" 
                placeholder="请输入详细地址"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="联系电话">
              <el-input 
                v-model="institutionForm.联系电话" 
                placeholder="请输入联系电话"
                type="tel"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="负责人">
              <el-input 
                v-model="institutionForm.负责人" 
                placeholder="请输入负责人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人联系方式" prop="负责人联系方式">
              <el-input 
                v-model="institutionForm.负责人联系方式" 
                placeholder="请输入负责人联系方式"
                type="tel"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合作状态" prop="合作状态">
              <el-select v-model="institutionForm.合作状态" placeholder="请选择合作状态">
                <el-option label="合作中" value="合作中"></el-option>
                <el-option label="待审核" value="待审核"></el-option>
                <el-option label="已终止" value="已终止"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="机构简介" prop="机构简介">
              <el-input 
                v-model="institutionForm.机构简介" 
                placeholder="请输入机构简介"
                type="textarea"
                rows="3"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="备注">
              <el-input 
                v-model="institutionForm.备注" 
                placeholder="请输入备注信息"
                type="textarea"
                rows="2"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="institutionDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitInstitutionForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { institutionAPI } from '../api'

// 状态数据
const loading = ref(false)
const institutions = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const searchForm = ref({
  机构名称: '',
  机构类型: '',
  所在地区: []
})

// 对话框相关
const institutionDialogVisible = ref(false)
const dialogType = ref('add')
const institutionFormRef = ref()
const institutionForm = ref({
  机构ID: '',
  机构名称: '',
  机构类型: '',
  所在地区: [],
  详细地址: '',
  联系电话: '',
  负责人: '',
  负责人联系方式: '',
  合作状态: '',
  机构简介: '',
  备注: ''
})

// 表单验证规则
const formRules = {
  机构名称: [
    { required: true, message: '请输入机构名称', trigger: 'blur' },
    { min: 2, max: 100, message: '机构名称长度应在 2 到 100 个字符之间', trigger: 'blur' }
  ],
  机构类型: [
    { required: true, message: '请选择机构类型', trigger: 'change' }
  ],
  所在地区: [
    { required: true, message: '请选择所在地区', trigger: 'change' }
  ],
  详细地址: [
    { required: true, message: '请输入详细地址', trigger: 'blur' }
  ],
  联系电话: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$|^0\d{2,3}-\d{7,8}$/, message: '请输入有效的电话号码', trigger: 'blur' }
  ]
}

// 地区选项（简化版）
const regionOptions = ref([
  {
    value: '北京市',
    label: '北京市',
    children: [
      {
        value: '北京市',
        label: '北京市',
        children: [
          { value: '东城区', label: '东城区' },
          { value: '西城区', label: '西城区' },
          { value: '朝阳区', label: '朝阳区' },
          { value: '海淀区', label: '海淀区' },
          { value: '丰台区', label: '丰台区' },
          { value: '石景山区', label: '石景山区' },
          { value: '通州区', label: '通州区' },
          { value: '昌平区', label: '昌平区' },
          { value: '大兴区', label: '大兴区' },
          { value: '房山区', label: '房山区' },
          { value: '门头沟区', label: '门头沟区' },
          { value: '顺义区', label: '顺义区' },
          { value: '怀柔区', label: '怀柔区' },
          { value: '平谷区', label: '平谷区' },
          { value: '密云区', label: '密云区' },
          { value: '延庆区', label: '延庆区' }
        ]
      }
    ]
  },
  {
    value: '上海市',
    label: '上海市',
    children: [
      {
        value: '上海市',
        label: '上海市',
        children: [
          { value: '黄浦区', label: '黄浦区' },
          { value: '徐汇区', label: '徐汇区' },
          { value: '长宁区', label: '长宁区' },
          { value: '静安区', label: '静安区' },
          { value: '普陀区', label: '普陀区' },
          { value: '虹口区', label: '虹口区' },
          { value: '杨浦区', label: '杨浦区' },
          { value: '浦东新区', label: '浦东新区' },
          { value: '闵行区', label: '闵行区' },
          { value: '宝山区', label: '宝山区' },
          { value: '嘉定区', label: '嘉定区' },
          { value: '金山区', label: '金山区' },
          { value: '松江区', label: '松江区' },
          { value: '青浦区', label: '青浦区' },
          { value: '奉贤区', label: '奉贤区' },
          { value: '崇明区', label: '崇明区' }
        ]
      }
    ]
  },
  {
    value: '广东省',
    label: '广东省',
    children: [
      {
        value: '广州市',
        label: '广州市',
        children: [
          { value: '越秀区', label: '越秀区' },
          { value: '海珠区', label: '海珠区' },
          { value: '荔湾区', label: '荔湾区' },
          { value: '天河区', label: '天河区' },
          { value: '白云区', label: '白云区' },
          { value: '黄埔区', label: '黄埔区' },
          { value: '番禺区', label: '番禺区' },
          { value: '花都区', label: '花都区' },
          { value: '南沙区', label: '南沙区' },
          { value: '从化区', label: '从化区' },
          { value: '增城区', label: '增城区' }
        ]
      },
      {
        value: '深圳市',
        label: '深圳市',
        children: [
          { value: '福田区', label: '福田区' },
          { value: '罗湖区', label: '罗湖区' },
          { value: '南山区', label: '南山区' },
          { value: '宝安区', label: '宝安区' },
          { value: '龙岗区', label: '龙岗区' },
          { value: '盐田区', label: '盐田区' },
          { value: '龙华区', label: '龙华区' },
          { value: '坪山区', label: '坪山区' },
          { value: '光明区', label: '光明区' },
          { value: '大鹏新区', label: '大鹏新区' }
        ]
      }
    ]
  }
])

// 根据搜索条件过滤医疗机构
const filteredInstitutions = computed(() => {
  let result = institutions.value
  
  // 根据机构名称过滤
  if (searchForm.value.机构名称) {
    const name = searchForm.value.机构名称
    result = result.filter(institution => institution.机构名称.includes(name))
  }
  
  // 根据机构类型过滤
  if (searchForm.value.机构类型) {
    result = result.filter(institution => institution.机构类型 === searchForm.value.机构类型)
  }
  
  // 根据所在地区过滤
  if (searchForm.value.所在地区 && searchForm.value.所在地区.length > 0) {
    result = result.filter(institution => {
      // 将字符串形式的地区转换为数组进行比较
      const institutionRegion = typeof institution.所在地区 === 'string' 
        ? institution.所在地区.split(',') 
        : institution.所在地区
      
      // 检查是否所有搜索地区都包含在机构地区中
      return searchForm.value.所在地区.every((region, index) => 
        institutionRegion[index] === region
      )
    })
  }
  
  return result
})

// 分页医疗机构
const paginatedInstitutions = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredInstitutions.value.slice(start, end)
})

// 获取数据
const getData = async () => {
  loading.value = true
  try {
    // 获取医疗机构列表
    const data = await institutionAPI.getInstitutions()
    institutions.value = data
  } catch (error) {
    ElMessage.error('获取数据失败')
    console.error('获取数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
}

// 重置搜索
const resetSearch = () => {
  searchForm.value = {
    机构名称: '',
    机构类型: '',
    所在地区: []
  }
  currentPage.value = 1
}

// 分页处理
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (current) => {
  currentPage.value = current
}

// 显示添加医疗机构对话框
const showAddInstitutionDialog = () => {
  dialogType.value = 'add'
  institutionForm.value = {
    机构ID: '',
    机构名称: '',
    机构类型: '',
    所在地区: [],
    详细地址: '',
    联系电话: '',
    负责人: '',
    负责人联系方式: '',
    合作状态: '待审核',
    机构简介: '',
    备注: ''
  }
  institutionDialogVisible.value = true
}

// 编辑医疗机构
const editInstitution = (row) => {
  dialogType.value = 'edit'
  // 处理地区字段，如果是字符串则转换为数组
  const formData = { ...row }
  if (typeof formData.所在地区 === 'string') {
    formData.所在地区 = formData.所在地区.split(',')
  }
  institutionForm.value = formData
  institutionDialogVisible.value = true
}

// 提交表单
const submitInstitutionForm = async () => {
  try {
    await institutionFormRef.value.validate()
    
    // 处理地区数据，转换为字符串格式
    const formData = { ...institutionForm.value }
    if (Array.isArray(formData.所在地区)) {
      formData.所在地区 = formData.所在地区.join(',')
    }
    
    if (dialogType.value === 'add') {
      // 生成机构ID
      const newInstitution = {
        ...formData,
        机构ID: Date.now(), // 简单生成ID
        加入时间: new Date().toISOString()
      }
      
      await institutionAPI.addInstitution(newInstitution)
      ElMessage.success('医疗机构添加成功')
    } else {
      const updatedInstitution = {
        ...formData,
        更新时间: new Date().toISOString()
      }
      await institutionAPI.updateInstitution(updatedInstitution)
      ElMessage.success('医疗机构更新成功')
    }
    
    institutionDialogVisible.value = false
    getData() // 重新获取数据
  } catch (error) {
    if (error !== false) { // 非表单验证错误
      ElMessage.error('操作失败，请重试')
      console.error('操作失败:', error)
    }
  }
}

// 删除医疗机构
const deleteInstitution = async (institutionId) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除该医疗机构吗？此操作不可撤销！',
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await institutionAPI.deleteInstitution(institutionId) 
    ElMessage.success('医疗机构已删除')
    getData() // 重新获取数据
  } catch (error) {
    if (error !== 'cancel' && error !== 'close') {
      ElMessage.error('删除失败')
      console.error('删除失败:', error)
    }
  }
}

// 查看医疗机构详情
const viewInstitutionDetail = (institutionId) => {
  // 这里可以实现跳转到医疗机构详情页面
  ElMessage.success('查看医疗机构详情功能待实现')
}

// 格式化地区显示
const formatRegion = (row) => {
  if (Array.isArray(row.所在地区)) {
    return row.所在地区.join(' ')
  }
  return row.所在地区 || ''
}

// 组件挂载时获取数据
onMounted(() => {
  getData()
})
</script>

<style scoped>
.institutions-container {
  padding: 20px;
}

.page-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-filter-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.search-form {
  display: flex;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.institution-name {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}

.institution-name:hover {
  color: #66b1ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-form .el-form-item {
    margin-bottom: 15px;
  }
}
</style>